<template>
  <div style='padding: 15px;'>
    <vxe-toolbar id="warehouseLocationId" :custom="{storage: true}" export :refresh="{query: findList}">
      <template v-slot:buttons>
        <el-button @click="findList">查询</el-button>
        <el-button @click="funcPrint" :disabled="btnDisabled">打印差异单</el-button>
      </template>
    </vxe-toolbar>
    <vxe-table
      ref="xTable"
      border
      resizable
      stripe
      auto-resize
      :export-config='{type:"csv"}'
      highlight-current-row
      align="center"
      highlight-hover-row
      row-id="id"
      class="mytable-footer"
      height="600"
      :loading="loading"
      :data="tableData"
      @checkbox-all="checkboxChangeEvent"
      @checkbox-change="checkboxChangeEvent"
    >
      <vxe-table-column type="seq" width="60"></vxe-table-column>
      <vxe-table-column type="checkbox" width="60"></vxe-table-column>
      <vxe-table-column>
        <vxe-table-column
          field="status"
          title="状态"
          min-width="140"
          sortable
          show-header-overflow
          show-overflow
          :formatter="({ cellValue }) => this.getEnumsOrDict('dict', 'differenceStatusList').get(cellValue)"
        />
        <template #header>
          <el-select
            v-model="listQuery.status"
            placeholder="请选择"
            clearable
          >
            <el-option
              v-for="item in getEnumsOrDict('enum', 'differenceStatusList')"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </template>
      </vxe-table-column>
      <vxe-table-column>
        <vxe-table-column field="code" title="差异单号" min-width="200" sortable show-header-overflow show-overflow/>
        <template #header>
          <el-input v-model="listQuery.code" placeholder="请输入差异单号" clearable />
        </template>
      </vxe-table-column>
      <vxe-table-column>
        <vxe-table-column field="countingCode" title="来源单号" min-width="200" sortable show-header-overflow show-overflow/>
        <template #header>
          <el-input v-model="listQuery.countingCode" placeholder="请输入来源单号" clearable />
        </template>
      </vxe-table-column>
      <vxe-table-column>
        <vxe-table-column field="warehouseName" title="仓库" min-width="200" sortable show-header-overflow show-overflow/>
        <template #header>
          <el-select
            v-model="listQuery.warehouseCode"
            placeholder="请选择仓库 "
            style="width: 100%"
            clearable
          >
            <el-option
              v-for="item in warehouseData"
              :key="item.code"
              :label="item.name"
              :value="item.code"
            />
          </el-select>
        </template>
      </vxe-table-column>
      <vxe-table-column>
        <vxe-table-column field="createdName" title="创建人" min-width="200" sortable show-header-overflow show-overflow/>
        <template #header>
          <el-input v-model="listQuery.createdName" placeholder="创建人" clearable />
        </template>
      </vxe-table-column>
      <vxe-table-column>
        <vxe-table-column field="gmtCreated" title="创建时间" min-width="400" sortable show-header-overflow show-overflow />
        <template #header>
          <el-date-picker
            v-model="gmtCreatedRange"
            type="daterange"
            value-format="yyyy-MM-dd"
            style="width:100%"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="value => changeDate(value, 'gmtCreated')"
          />
        </template>
      </vxe-table-column>
      <vxe-table-column>
        <vxe-table-column field="modifiedName" title="修改人" min-width="200" sortable show-header-overflow show-overflow/>
        <template #header>
          <el-input v-model="listQuery.modifiedName" placeholder="修改人" clearable />
        </template>
      </vxe-table-column>
      <vxe-table-column>
        <vxe-table-column field="gmtModified" title="修改时间" min-width="400" sortable show-header-overflow show-overflow />
        <template #header>
          <el-date-picker
            v-model="gmtModifiedRange"
            type="daterange"
            value-format="yyyy-MM-dd"
            style="width:100%"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="value => changeDate(value, 'gmtModified')"
          />
        </template>
      </vxe-table-column>
      <vxe-table-column title="操作" fixed="right" min-width="150">
        <template slot-scope="scope">
          <template v-if="scope.row.status == 0">
            <el-tooltip  effect="dark" content="审核" placement="top">
              <vxe-button type="text" @click="funcAudit(scope.row.code)">
                <i class="el-icon-check" />
              </vxe-button>
            </el-tooltip>
          </template>
          <el-tooltip  effect="dark" content="查看" placement="top">
            <vxe-button type="text" @click="funcDetail(scope.row.code)">
              <i class="el-icon-document" />
            </vxe-button>
          </el-tooltip>
        </template>
      </vxe-table-column>
    </vxe-table>
    <vxe-pager
      :loading="loading"
      :current-page.sync="listQuery.pageNum"
      :page-size.sync="listQuery.pageSize"
      :total="listQuery.total"
      :layouts="['PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'Sizes', 'FullJump', 'Total']"
      @page-change="handlePageChange"
    />
    <vxe-modal v-model="modelAuditFlag" title="审核" width="700" height="400">
      <compAudit ref="auditRef" @fatherCancel="modelAuditFlag = false" @fatherAudit="fatherAudit"  />
    </vxe-modal>
    <vxe-modal v-model="modelPrintFlag" title="打印" width="900" height="800" resize>
      <compPrint ref="printRef" />
    </vxe-modal>
  </div>
</template>
<script>
import Vue from 'vue'
import 'xe-utils'
import VXETable from 'vxe-table'
import 'vxe-table/lib/index.css'
Vue.use(VXETable)

import moment from 'moment'
import { differenceList } from "@/api/store";
import { getWarehouse } from "@/api/basicInfo";
import compPrint from './components/print.vue'
import compAudit from "./components/differenceAudit.vue";
export default {
  name: '差异管理',
  components:{ compPrint, compAudit },
  data(){
    return{
      modelAuditFlag: false,
      modelPrintFlag: false, //打印开关
      loading: false,
      warehouseData: [],
      gmtCreatedRange: '',
      gmtModifiedRange: '',
      listQuery:{
        pageNum:1,
        pageSize:10,
        total:0
      },
      tableData:[],
      selectData: [], // 选中的数据
    }
  },
  computed: {
    // 按钮是否禁用
    btnDisabled() {
      return this.selectData.length < 1
    }
  },
  created(){
    this.findList()
    this.$eventBus.$on('refreshList', () => this.findList())
  },
  destroyed() {
    this.$eventBus.$off('refreshList')
  },
  methods:{
    getWarehouse() {
      return getWarehouse().then((res) => this.warehouseData = res.data)
    },
    findList(){
      this.selectData = []
      this.getWarehouse();
      this.loading = true;
      return differenceList(this.listQuery).then((response) => {
        this.tableData = response.data.records;
        this.listQuery.total = response.data.total;
        this.loading = false;
      })
    },
    //打印
    funcPrint() {
      this.$refs.printRef.date = moment().format('YYYY-MM-DD HH:mm:ss')
      const arr = this.selectData.map(i => i.code)
      this.$refs.printRef.getInfo(arr)
      this.modelPrintFlag = true
    },
    // 审核组件的父方法
    fatherAudit() {
      this.modelAuditFlag = false;
      this.findList();
    },
    changeDate(value, prefix) {
      if (value) {
        this.listQuery[`${prefix}Start`] = value[0] + " 00:00:00";
        this.listQuery[`${prefix}End`] = value[1] + " 23:59:59";
      } else {
        this.listQuery[`${prefix}Start`] = "";
        this.listQuery[`${prefix}End`] = "";
      }
    },
    // 审核方法
    funcAudit(code) {
      this.$refs.auditRef.getInfo(code);
      this.modelAuditFlag = true;
    },
    // 详情方法
    funcDetail(code) {
      this.$router.push({
        path: "differenceDetail",
        query: { code: code },
      })
    },
     // 分页handle
    handlePageChange({ currentPage, pageSize }) {
      this.listQuery.pageNum = currentPage
      this.listQuery.pageSize = pageSize
      this.findList()
    },
    // 全选与否、部分勾选与否
    checkboxChangeEvent({ selection }) {
      this.selectData = selection
    },
  }
}
</script>
